<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con ">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh fragment-container">
						<div class="rightCon">
							<headerPcTow :title="$t('l_yuebao')" :conTitle="$t('l_meixiaoshi')"></headerPcTow>
							<div class="main_level_box">

								<div class="main_level_leftTow">
									<div class="level_content">
										<!-- <div class="level_content_top">
											<p>{{$t('l_yuebaojine')}}<i class="styy">{{info?info.yeb_money*1:''}}</i>
											</p>
										</div>
										<div class="level_content_top">
											<p>{{$t('l_nianlilv')}}<i class="styy">{{info?info.yeb_scale:''}}</i>（%）</p>
										</div> -->
										<div class="main_level_right">
											<div class="litem1 litem2THree litem2Four" @click="yubTran(1)">{{$t('l_cunru')}}</div>
											<div class="litem1 litem2THree" :class="{litem2Four:info.yeb_money>1}"
												@click="yubTran(2)">{{$t('l_zhuanchu1')}}</div>
										</div>
									</div>
								</div>
								<div class="main_level_leftTow">
									<div class="level_content">
										<div class="level_content_top">
											<p>{{$t('l_yuebaojine')}}<i>{{info?info.yeb_money*1:''}}</i></p>
										</div>
									
										<div class="level_content_top">
											<p>{{$t('l_dangqianshouyi')}}<strong>{{info?info.yeb_money_suo:''}}</strong>
											</p>
										</div>
										<div class="level_content_top">
											<p>{{$t('l_leijishouyi')}}<strong>{{info?info.all_money:''}}</strong></p>
										</div>
										<!-- <div class="main_level_right">
											<div v-if="info.yeb_money_suo>0" class="litem1 litem2THree litem2Four"
												@click="yeb_task">{{$t('l_lingqu')}}</div>
											<div v-else class="litem1 litem2THree" @click="yeb_task">{{$t('l_lingqu')}}
											</div>
										</div> -->
									</div>
								</div>
							</div>
							<div class="con1One">
								<div class="con1Tow">
									<div class="headerTow ">
										<div :class="'hitemTow ' + (item.id == navIndex?'active':'')"
											v-for="(item,index) in navList" :key="index" @click="changeNav(item)">
											<div class="nav_text" style="font-size: 15px;">
												{{ item.name }}
											</div>
										</div>
									</div>
								</div>
								<div class="selBoxTow" v-if="navIndex!=2">
									<div class="selBoxLeft">
										<select v-model="sele" @change="chageSelect" class="pcSeleTow">
											<option value="1">{{$t('l_jintian')}}</option>
											<option value="2">{{$t('l_zuotian')}}</option>
											<option value="3">{{$t('l_jinqitian')}}</option>
											<option value="4">{{$t('l_jin15tian')}}</option>
											<option value="5">{{$t('l_jin30tian')}}</option>
										</select>
										<select v-model="sele2" @change="chageSelect3" style="margin-left: 10px;"
											class="pcSeleTow">
											<option value="1">{{$t('l_quanbuleixing')}}</option>
											<option value="2">{{$t('l_zhuanru')}}</option>
											<option value="3">{{$t('l_zhuanchu')}}</option>
											<option value="4">{{$t('l_lingqushouyi')}}</option>
										</select>
									</div>
									<div class="selBoxRight">
										{{$t('l_leijishouyi')}}<span
											style="color: var(--theme-secondary-color-finance);">
											0.0000
										</span>
									</div>
								</div>
								<div class="ul" style="width: 100%;padding-bottom: 20px;" v-if="navIndex!=2">
									<div class="fanshuiBox" style="margin-top: 0px;">
										<ul>
											<li>{{$t('l_shijian')}}</li>
											<li>{{$t('l_leixing')}}</li>
											<li v-if="navIndex==0">{{$t('l_shouyijine')}}</li>
											<li v-if="navIndex==1">{{$t('l_biandongjine')}}</li>
										</ul>
										<div class="fanlistBox" v-if="yebList.length > 0" @scroll="listenScroll">
											<ul v-for="(item,index) in yebList" :key="index">
												<li>
													{{$F.date('Y-m-d H:i:s',item.create_time)}}
												</li>
												<li>
													<span v-if="item.type==4">{{$t('l_shouyimingxi')}}</span>
													<span v-if="item.type==1">{{$t('l_zhuanru')}}</span>
													<span v-if="item.type==2">{{$t('l_zhuanchu')}}</span>
													<span v-if="item.type==3">{{$t('l_lingqushouyi')}}</span>
												</li>
												<li>
													{{item.money}}
												</li>
											</ul>
										</div>
										<div class="rightThree" v-if="yebList.length == 0">
											<div class="nodataTow">
												<img src="../../assets/images/yh/nodata.png" alt="">
												<div>{{$t('l_zanwujilu')}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="ruleBox" v-if="navIndex==2" style="font-size: 15px;margin-top: 20px;">
									<div class="title">
										{{$t('l_yuebaoguize')}}
									</div>
									<div class="conten">
										{{$t('l_yuebaoguize1')}}<br>
										{{$t('l_yuebaoguize2')}}<br>
										{{$t('l_yuebaoguize3')}}<br>
										{{$t('l_yuebaoguize4')}}<br>
									</div>
								</div>
								<div class="ruleBox" v-if="navIndex==2" style="font-size: 15px;margin-top: 10px;">
									<div class="title">
										{{$t('l_shouyijisuan')}}
									</div>
									<div class="conten">
										<p style="margin-bottom: 6px">
											{{$t('l_meixiaoshishouyi')}}={{$t('l_yuebaojine')}}×{{$t('l_nianlilv')}}÷365{{$t('l_tian')}}÷24{{$t('l_xiaoshi')}}
										</p>
										{{$t('l_shili')}}：<br>
										{{$t('l_shili1')}}：<br>
										10000*88%÷365÷24{{$t('l_xiaoshi')}}=<span
											style="color: var(--theme-secondary-color-finance);">1.0045</span><br>
									</div>
								</div>
							</div>
						</div>
						<Bottom :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></Bottom>

						<div class="regBox" v-if="is_showPop">
							<div class="regBox_pub"></div>
							<div class="regBox_main regBox_mainTow" style="height: auto;">
								<p style="color: #fff;font-size: 15px;padding: 10px 20px 5px;">{{$t('l_jine')}}</p>
								<div class="search_boxTow">
									<el-input :placeholder="$t('l_shurujine')" v-model="money"
										class="search_boxTowInput">
										<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
									</el-input>
									<div class="recycle_btnTow" @click="yeb_tran" v-if="tranType==1">
										{{$t('l_cunru')}}
									</div>
									<div class="recycle_btnTow" @click="yeb_tran" v-if="tranType==2">
										{{$t('l_zhuanchu1')}}
									</div>
								</div>
								<div class="closeBtnTow" @click="closeForget">
								</div>
							</div>
						</div>

					</div>

				</div>

			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="notice pageContainer">
					<!-- :conTitle="$t('l_meixiaoshi')" -->
					<navHeader :title="$t('l_yuebao')" ></navHeader>
					<div class="fragment-container">
						<div class="main_level_boxtow" v-if="info">
							<div class="top">
								<div class="main_level_left">
									<div class="level_content">
										<div class="level_content_top">
											<p>{{$t('l_yuebaojine')}}<i>{{info?info.yeb_money*1:''}}</i></p>
											<p>{{$t('l_dangqianshouyi')}}<strong>{{info?info.yeb_money_suo:''}}</strong>
											</p>
											<p>{{$t('l_leijishouyi')}}<strong>{{info?info.all_money:''}}</strong></p>
										</div>
									</div>
								</div>
								<div class="main_level_right">
									<!-- <div class="level_content_top">
										<p>{{$t('l_nianlilv')}}（%）<i>{{info?info.yeb_scale:''}}</i></p>
									</div> -->
									<div class="level_content_Con">
										<div class="litem1 litem2THree litem2Four" @click="yubTran(1)">{{$t('l_cunru')}}
										</div>
										<div class="litem1 litem2THree" :class="{litem2Four:info.yeb_money>1}"
											@click="yubTran(2)">{{$t('l_zhuanchu1')}}</div>
									</div>
									<!-- <div v-if="info.yeb_money_suo>0" class="litem1 litem2THree" @click="yeb_task"
										:class="{litem2Four:info.yeb_money_suo>0}">{{$t('l_lingqu')}}</div>
									<div v-else class="litem1 litem2THree">{{$t('l_lingqu')}}</div> -->
								</div>
							</div>
							<div class="container scroll-container">
								<div class="nav_top_box">
									<div :class="'nav_item ' + (item.id == navIndex?'nav_active':'')"
										v-for="(item,index) in navList" :key="index" @click="changeNav(item,index)">
										<div class="nav_text">
											{{ item.name }}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="con1OneTow" v-if="info">
							<div class="selBox" v-if="navIndex!=2">
								<div class="selBoxLeft">
									<select v-model="sele" @change="chageSelect" class="pcSele">
										<option value="1">{{$t('l_jintian')}}</option>
										<option value="2">{{$t('l_zuotian')}}</option>
										<option value="3">{{$t('l_jinqitian')}}</option>
										<option value="4">{{$t('l_jin15tian')}}</option>
										<option value="5">{{$t('l_jin30tian')}}</option>
									</select>
									<select v-model="sele2" @change="chageSelect3" style="margin-left: 10px;"
										class="pcSele" v-if="navIndex==1">
										<option value="1">{{$t('l_quanbuleixing')}}</option>
										<option value="2">{{$t('l_zhuanru')}}</option>
										<option value="3">{{$t('l_zhuanchu')}}</option>
										<option value="4">{{$t('l_lingqushouyi')}}</option>
									</select>
								</div>
								<div class="selBoxRight">
									{{$t('l_leijishouyi')}}<span style="color: var(--theme-secondary-color-finance);">
										0.0000
									</span>
								</div>
							</div>
							<div class="ul" style="width: 100%;padding-bottom: 20px;" v-if="navIndex!=2">
								<div class="fanshuiBoxTow">
									<ul>
										<li>{{$t('l_shijian')}}</li>
										<li>{{$t('l_leixing')}}</li>
										<li v-if="navIndex==0">{{$t('l_shouyijine')}}</li>
										<li v-if="navIndex==1">{{$t('l_biandongjine')}}</li>
									</ul>
									<div class="fanlistBoxTow" v-if="yebList.length > 0" @scroll="listenScroll">
										<ul v-for="(item,index) in yebList" :key="index">
											<li>
												{{$F.date('Y-m-d H:i:s',item.create_time)}}
											</li>
											<li>
												<span v-if="item.type==4">{{$t('l_shouyimingxi')}}</span>
												<span v-if="item.type==1">{{$t('l_zhuanru')}}</span>
												<span v-if="item.type==2">{{$t('l_zhuanchu')}}</span>
												<span v-if="item.type==3">{{$t('l_lingqushouyi')}}</span>
											</li>
											<li>
												{{item.money}}
											</li>
										</ul>
									</div>
									<div class="nodata" v-if="yebList.length == 0">
										<img src="../../assets/images/yh/nodata.png" alt="">
										<div>{{$t('l_zanwujilu')}}</div>
									</div>
								</div>
							</div>
							<div class="ruleBox" v-if="navIndex==2">
								<div class="title">
									{{$t('l_yuebaoguize')}}
								</div>
								<div class="conten">
									{{$t('l_yuebaoguize1')}}<br>
									{{$t('l_yuebaoguize2')}}<br>
									{{$t('l_yuebaoguize3')}}<br>
									{{$t('l_yuebaoguize4')}}<br>
								</div>
							</div>
							<div class="ruleBox" v-if="navIndex==2">
								<div class="title">
									{{$t('l_shouyijisuan')}}
								</div>
								<div class="conten">
									<p style="margin-bottom: 6px">
										{{$t('l_meixiaoshishouyi')}}={{$t('l_yuebaojine')}}×{{$t('l_nianlilv')}}÷365{{$t('l_tian')}}÷24{{$t('l_xiaoshi')}}
									</p>
									{{$t('l_shili')}}：<br>
									{{$t('l_shili1')}}：<br>
									10000*88%÷365÷24{{$t('l_xiaoshi')}}=<span
										style="color: var(--theme-secondary-color-finance);">1.0045</span><br>
								</div>
							</div>
						</div>

						<div class="regBox" v-if="is_showPop">
							<div class="regBox_pub"></div>
							<div class="regBox_main regBox_mainTow" style="height: auto;width: 80%;">
								<p style="color: #fff;font-size: 14px;padding: 10px 20px 5px;">{{$t('l_jine')}}</p>
								<div class="search_boxTow">
									<el-input :placeholder="$t('l_shurujine')" v-model="money"
										class="search_boxTowInput">
										<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
									</el-input>
									<div class="recycle_btnTow" style="font-size: 13px;" @click="yeb_tran"
										v-if="tranType==1">
										{{$t('l_cunru')}}
									</div>
									<div class="recycle_btnTow" style="font-size: 13px;" @click="yeb_tran"
										v-if="tranType==2">
										{{$t('l_zhuanchu1')}}
									</div>
								</div>
								<div class="closeBtn" @click="closeForget">
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import Bottom from '../../components/bottom.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow,
			Bottom
		},
		data() {
			return {
				navIndex: 0,
				navList: [
					{
						id: 0,
						name: this.$t('l_shouyimingxi')
					},
					{
						id: 1,
						name: this.$t('l_yuebaozhangbian')
					},
					{
						id: 2,
						name: this.$t('l_yuebaoguize')
					}
				],
				noticeData: [],
				navIndex1: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],

				noticeData: [],

				sele2: 1,
				sele: 1,
				time_type: 1,

				page: 1,
				info: false,
				money: null,
				is_showPop: false,
				tranType: 1,
				yebList: [],
				yebtype: '1,2,3',
			}
		},
		created() {
			this.yebInfo()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			yebInfo() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.yebInfo({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.info = res.data;
						this.sy_yeb_log();
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			/**
			 * 收益明细
			 */
			sy_yeb_log() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.yeb_log({
					page: this.page,
					time_type: this.time_type, // 1今日 2昨日 3 近7日 4 近7日  5 近30日
					type: '4', //收益明细 固定4
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.yebList = [...this.yebList, ...res.data.list];
						console.log(res.data.list);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			/**
			 * 余额宝账变
			 */
			yeb_log() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.yeb_log({
					page: this.page,
					time_type: this.time_type, // 1今日 2昨日 3 近7日 4 近7日  5 近30日
					type: this.yebtype, // 1,2,3代表全部 1转入 2转出 3领取收益 
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.yebList = [...this.yebList, ...res.data.list];
						console.log(res.data.list);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			/**
			 * 余额宝转入转出点击事件
			 */
			yubTran(e) {
				this.is_showPop = true;
				this.tranType = e;
			},
			closeForget() {
				this.is_showPop = false;
				this.tranType = null;
				this.money = null;
			},
			/**
			 * 余额宝转入转出
			 */
			yeb_tran() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				if (this.money < 1) {
					this.$message.error(this.$t('l_bunengdiyu1'));
					loading.close()
					return false;
				}
				this.$api.yeb_tran({
					money: this.money, //金额 不能少于1元
					type: this.tranType, // 1转入 2转出
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.is_showPop = false;
						this.tranType = null;
						this.money = null;
						this.yebInfo()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			/**
			 * 余额宝领取任务
			 */
			yeb_task() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.yeb_task({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.yebInfo()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changeNav(item, index) {
				this.sele2 = 1;
				this.sele = 1;
				this.navIndex = item.id;
				if (this.navIndex == 0) {
					this.page = 1;
					this.time_type = 1;
					this.yebList = [];
					this.sy_yeb_log();
				} else if (this.navIndex == 1) {
					this.page = 1;
					this.yebtype = '1,2,3';
					this.time_type = 1;
					this.yebList = [];
					this.yeb_log();
				} else if (this.navIndex == 2) {

				}
				
				document.querySelector('.scroll-container').scrollTop = document.querySelector('#gameslist_' + item.id)
					.offsetTop - (window.outerWidth / 750 * 200)
			},
			listenScroll(e) { //监听滚动
				let ele = e.srcElement ? e.srcElement : e.target;
				if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { //监听滚动到div底部
					this.addMoreData()
				}
			},
			addMoreData() { //加载更多
				this.page++;
				if (this.navIndex == 0) {
					this.sy_yeb_log();
				} else if (this.navIndex == 1) {
					this.yeb_log();
				}
			},
			chageSelect() {
				this.page = 1;
				this.time_type = this.sele;
				this.yebList = [];
				if (this.navIndex == 0) {
					this.sy_yeb_log();
				} else if (this.navIndex == 1) {
					this.yebtype = '1,2,3';
					this.yeb_log();
				}
				// 1今日 2昨日 3 近7日 4 近7日  5 近30日
			},
			chageSelect3(e) {
				console.log(this.sele2);
				this.page = 1;
				this.yebList = [];
				if (this.navIndex == 0) {
					this.sy_yeb_log();
				} else if (this.navIndex == 1) {
					if (this.sele2 == 1) {
						this.yebtype = '1,2,3';
					} else {
						this.yebtype = parseFloat(this.sele2) - 1;
					}
					this.yeb_log();
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.regBox {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		overflow-y: overlay;
		top: 0;
		left: 0;

		.regBox_mainTow {
			border-radius: 10px;
			top: 20vh;
			width: 40%;
			height: 70%;

			b {
				margin: 10px 0px;
				color: var(--theme-text-color-darken);
				font-size: 20px;
				height: 35px;
			}

			.formsTow {
				height: 100%;
				overflow-x: hidden;
				overflow-y: overlay;
				padding: 0 15px;
				display: flex;
				flex-direction: column;
			}
		}

		.closeBtn {
			position: absolute;
			border-radius: 50%;
			z-index: 3;
			bottom: -.9rem;
			left: 0;
			right: 0;
			margin: auto;
			width: 0.5984rem;
			height: 0.5984rem;
			background-image: url(/icons/main.png);
			background-position: -5.1136rem -4.2024rem;
			background-size: 8.296rem 7.7928rem;
		}

		.closeBtnTow {
			position: absolute;
			border-radius: 50%;
			z-index: 3;
			bottom: -45px;
			left: 0;
			right: 0;
			margin: auto;
			width: 35px;
			height: 35px;
			background-image: url(/icons/main.png);
			background-position: -276px 195px;
			background-size: 450px 420px;
			cursor: pointer;
		}

		&_pub {
			position: fixed;
			z-index: 1;
			width: 100vw;
			height: 100vh;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .6);
		}

		&_main {
			position: absolute;
			z-index: 2;
			background-color: var(--theme-bg-color);
			border: thin solid;
			border-color: var(--theme-color-line);
			border-radius: 0.2rem;
			position: absolute;
			top: 26vh;
			left: 0;
			right: 0;
			width: 6rem;
			height: 7rem;
			margin: auto;
		}
	}

	.search_boxTow {
		margin: 0px 0 20px;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}

	.recycle_btnTow {
		font-size: 15px;
		background-color: var(--theme-primary-color);
		width: 84px;
		height: 35px;
		cursor: pointer;
		color: var(--theme-primary-font-color);
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-weight: 300;
		margin-left: 10px;
	}

	.closeBtn {
		position: absolute;
		border-radius: 50%;
		z-index: 3;
		bottom: -.9rem;
		left: 0;
		right: 0;
		margin: auto;
		width: 0.5984rem;
		height: 0.5984rem;
		background-image: url(/icons/main.png);
		background-position: -5.1136rem -4.2024rem;
		background-size: 8.296rem 7.7928rem;
	}

	.regBox {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		overflow-y: overlay;
		top: 0;
		left: 0;

		.regBox_mainTow {
			border-radius: 10px;
			top: 20vh;
			width: 40%;
			height: 70%;

			b {
				margin: 10px 0px;
				color: var(--theme-text-color-darken);
				font-size: 20px;
				height: 35px;
			}

			.formsTow {
				height: 100%;
				overflow-x: hidden;
				overflow-y: overlay;
				padding: 0 15px;
				display: flex;
				flex-direction: column;
			}
		}
	}

	.fragment-container {
		height: 100vh;
		overflow-y: scroll;
		max-width: 100vw;
		margin: 0 auto;
	}

	.rightThree {
		width: 100%;
		margin: 60px 0;
	}

	.nodataTow {
		margin: 0 auto;
		text-align: center;
	}

	.nodataTow img {
		height: 150px;
		margin-bottom: 10px;
		margin: 0 auto;
		width: 170px;
	}

	.nodataTow div {
		color: var(--theme-alt-neutral-2);
		font-size: 16px;
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.contentTow {
		width: 96%;
		margin: 0px auto;
		padding: 10px 0px;
		color: var(--theme-text-color);
		font-size: 14px;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		// height: 300px;
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.fanshuiBoxTow {
		width: 96%;
		margin: 10px auto 0;
	}


	.closeBtn {
		position: absolute;
		border-radius: 50%;
		z-index: 3;
		bottom: -.9rem;
		left: 0;
		right: 0;
		margin: auto;
		width: 0.5984rem;
		height: 0.5984rem;
		background-image: url(/icons/main.png);
		background-position: -5.1136rem -4.2024rem;
		background-size: 8.296rem 7.7928rem;
	}

	.ul {
		width: 100%;
		padding: 0px 10px;
		box-sizing: border-box;
		height: auto;
		overflow-y: auto;
	}

	.pcSele {
		max-width: 150px;
		min-width: 90px;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 32px;
		outline: 0;
		// background-color: var(--theme-top-nav-bg)!important;
		border-radius: 16px;
		box-shadow: none;
		color: var(--theme-text-color);
		font-size: 12px;
		height: 32px !important;
		text-align: center;
		// border-color: var(--theme-color-line);

		background-color: var(--theme-main-bg-color)!important;
   		 color: var(--theme-text-color);
	}

	.pcSeleTow {
		max-width: 180px;
		min-width: 100px;
		width: auto !important;
		list-style: none;
		margin: 0;
		line-height: 35px;
		outline: 0;
		// background-color: var(--theme-top-nav-bg)!important;
		border-radius: 16px;
		box-shadow: none;
		color: var(--theme-text-color);
		font-size: 15px;
		height: 35px !important;
		text-align: center;
		// border-color: var(--theme-color-line);
		background-color: var(--theme-main-bg-color)!important;
   		 color: var(--theme-text-color);
	}

	.fanshuiBox>ul {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-around;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}


	.fanshuiBox>ul li {
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fanshuiBoxTow>ul {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		font-size: 13px;
		background-color: var(--theme-main-bg-color);
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-around;
		border-radius: 5px;
	}


	.fanshuiBoxTow>ul li {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;

		&:first-child {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.fanlistBox {
		height: calc(80vh);
		overflow-y: scroll;
	}

	.fanlistBox>ul {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-around;
		border-radius: 5px;
	}

	.fanlistBox>ul:nth-child(1) {
		border: none;
	}

	.fanlistBox>ul li {
		width: 33%;
		text-align: center;
		color: var(--theme-text-color);

		&:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.fanlistBox>ul li .liOne {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fanlistBox>ul li .liOne img {
		width: 45px;
		height: 35px;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}

	.fanlistBoxTow {
		height: calc(53vh);
		overflow-y: scroll;
	}

	.fanlistBoxTow>ul {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		font-size: 13px;
		justify-content: space-around;
		border-radius: 5px;
	}

	.fanlistBoxTow>ul:nth-child(1) {
		border: none;
	}

	.fanlistBoxTow>ul li {
		width: 25%;
		text-align: center;
		color: var(--theme-text-color);


		&:first-child {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.fanlistBoxTow>ul li .liOne {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fanlistBoxTow>ul li .liOne img {
		width: 45px;
		height: 35px;
	}

	.fanlistBoxTow>ul:nth-child(2n) {
		background-color: var(--theme-main-bg-color);
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;


	}

	.main_level_boxtow {
		margin: 0px auto 0;
		justify-content: space-between;
		background: var(--theme-main-bg-color);
		// box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 20px 10px 0px;
		box-sizing: border-box;
		position: relative;

		.top {
			align-items: center;
			display: flex;
			justify-content: space-between;

			.main_level_left {
				display: flex;
				align-items: center;


				.level_content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex-grow: 1;

					&_top {
						font-size: 13px;
						color: var(--theme-text-color-lighten);
						text-align: left;

						p {
							&:nth-child(2) {
								margin: 15px 0;
							}

							i {
								font-style: normal;
								color: var(--theme-text-color);
								font-weight: 400;
								margin: 0 5px;
							}

							strong {
								font-weight: 400;
								margin: 0 5px;
								color: var(--theme-secondary-color-finance);
							}
						}
					}
				}
			}

			.main_level_right {

				.level_content_top {
					margin-left: 10px;
					font-size: 13px;
					color: var(--theme-text-color-lighten);
					text-align: left;

					p {
						i {
							font-style: normal;
							color: var(--theme-text-color);
							font-weight: 400;
							margin: 0 5px;
						}
					}
				}

				.level_content_Con {
					display: flex;
					align-items: center;
				}

				.litem1 {
					padding: 0 2.5px;
					line-height: 25px;
					text-align: center;
					font-size: 12px;
					color: #ffff;
					border-radius: 5px;
					margin: 0 auto;
					margin-top: 10px;
					cursor: pointer;
					margin-left: 10px;
				}

				.litem2THree {
					width: 65px;
					// height: 23px;
					// line-height: 23px;
					font-size: 12px;
					cursor: pointer;
					background-color: rgb(153, 153, 153);
				}

				.litem2Four {
					background-color: var(--theme-primary-color);
   					 border-color: var(--theme-primary-color);
				}

			}
		}

	}

	.main_level_box {
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 35px 10px 20px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
		position: relative;

		.boxLeft {
			padding: 3px 3px;
			box-sizing: border-box;
			align-items: center;
			background-color: var(--theme-secondary-color-error);
			border-radius: 5px 5px 5px 0;
			color: #fff;
			display: flex;
			font-size: 12px;
			justify-content: center;
			left: 0;
			position: absolute;
			top: 0;
			z-index: 1
		}

		.main_level_left {
			display: flex;
			align-items: center;

			.level_content {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				flex-grow: 1;

				&_top {
					font-size: 13px;
					color: var(--theme-text-color-lighten);
					text-align: left;

					p {
						i {
							color: var(--theme-secondary-color-error);
							font-weight: 700;
							margin: 0 5px;
						}

						strong {
							color: var(--theme-secondary-color-finance);
						}
					}
				}
			}
		}

		.main_level_leftTow {
			display: flex;


			.level_content {
				display: flex;
				align-items: center;
				flex-grow: 1;

				&_top {
					font-size: 15px;
					color: var(--theme-text-color-lighten);
					text-align: left;
					width: 180px;

					p {

						i {
							font-style: normal;
							color: var(--theme-text-color);
							font-weight: 400;
							margin: 0 5px;
						}

						strong {
							font-weight: 400;
							margin: 0 5px;
							color: var(--theme-secondary-color-finance);
						}
					}
				}
			}
		}

		.main_level_right {
			display: flex;
			align-items: center;

			.litem1 {
				padding: 0 2.5px;
				line-height: 25px;
				text-align: center;
				font-size: 12px;
				color: #ffff;
				border-radius: 5px;
				margin: 0 auto;
				margin-top: 10px;
				cursor: pointer;
				margin-left: 10px;
			}

			.litem2THree {
				width: 70px;
				height: 30px;
				line-height: 30px;
				font-size: 13px;
				cursor: pointer;
				background-color: rgb(153, 153, 153);
			}

			.litem2Four {
				background-color: var(--theme-text-color-lighten);
  			  border-color: var(--theme-text-color-lighten);
			}
		}
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.con1One {
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 20px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
	}

	.con1OneTow {
		padding: 10px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.selBoxTow {
		width: 96%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.selBoxLeft {
			display: flex;
			align-items: center;
		}

		.selBoxRight {
			font-size: 15px;
			color: var(--theme-text-color-lighten);
		}
	}

	.selBox {
		width: 96%;
		margin: 0px auto 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.selBoxLeft {
			display: flex;
			align-items: center;
		}

		.selBoxRight {
			font-size: 12px;
			color: var(--theme-text-color-lighten);
		}
	}

	select:focus {
		border-color: var(--theme-main-bg-color);
	}

	.ruleBox {
		width: 96%;
		margin: 0px auto 10px;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		font-size: 13px;
		border: 1px solid var(--theme-color-line);

		.title {
			color: #fff;
			margin-bottom: 10px;
		}

		.conten {
			color: var(--theme-text-color);
		}
	}

	.con1Tow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.con1TowTitle {
		font-size: 18px;
		color: #fff;
		margin-bottom: 10px;
		padding: 0px 20px;
	}

	.headerTow {
		height: 36px;
		display: flex;
		padding: 0px 10px;
		justify-content: flex-start;
		align-items: center;
	}

	.hitemTow {
		height: 30px;
		border-bottom: 2px solid transparent;
		line-height: 30px;
		font-size: 12px;
		color: #fff;
		margin-left: 30px;
		cursor: pointer;
		position: relative;
	}

	.hitemTow:first-child {
		margin-left: 0;
	}

	.hitemTow.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.notice {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--theme-bg-color);

		.nav_top_box {
			padding: 0.1rem 0.2rem 0;
			display: flex;

			.nav_item {
				font-size: .22rem;
				color: var(--theme-text-color-darken);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-align: center;
				height: 0.72rem;
				margin-right: 0.6rem;

				.nav_text {
					font-weight: 300;
				}

				.nav_tab_box {
					height: 0.32rem;
					position: absolute;
					top: -0.02rem;
					right: -0.26rem;

					.tab_text {
						font-size: .18rem;
						height: 0.26rem;
						line-height: .26rem;
						padding: 0 0.04rem;
						background-color: var(--theme-secondary-color-error);
						border-radius: 0.125rem 0.125rem 0.125rem 0;
						color: #fff;
						width: 100%;
						font-weight: 300;
					}

					p:nth-child(2) {
						border-bottom: 0.07rem solid transparent;
						border-left: 0.07rem solid var(--theme-secondary-color-error);
						border-right: 0.07rem solid transparent;
						height: 0;
						width: 0;
					}
				}
			}

			.nav_active {
				border-bottom: 0.04rem solid var(--theme-primary-color);
				color: var(--theme-primary-color);
			}
		}
	}

	/* 底部 */
	.bottomBox {
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 80px;
		padding-bottom: 60px;
	}

	.bottomBoxOne {
		width: 62%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}

	.boxTop {
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}

	.boxTopL {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}

	.boxTopL li {
		width: 176px;
		color: var(--theme-text-color-lighten);
	}

	.boxTopL h3 {
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}

	.boxTopL a {
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}

	.boxTopL a:hover {
		color: var(--theme-primary-color);
	}

	.boxTopR {
		width: 420px;
	}

	.boxTopRImg {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.boxTopRImg img {
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}

	.boxTopRText {
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}

	.boxCon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxCon img {
		width: 85px;
		height: 30px;
		margin: 10px 8px;
	}

	.boxCon img:nth-child(1),
	.boxCon img:nth-child(2),
	.boxCon img:nth-child(3) {
		width: 95px;
		height: 30px;
		margin: 10px 6px;
	}

	.boxBot {
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}

	.fragment-container::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}
</style>